<template>
  <rx-layout>
    <div slot="center">
      <a-form-model ref="form" :model="mdl" :rules="rules" layout="vertical" class="rx-a-form-vertical">

        <a-form-model-item   :label="i18n('form.fieldKey','字段标识')" prop="field">
          <a-input  style="width: 300px" v-model="mdl.field"/>
        </a-form-model-item>

          <a-form-model-item   :label="i18n('form.demonstrations','展示方式')">
              <a-radio-group  v-model="mdl.MAP"  @change="handleChange(mdl.MAP,'MAP')" style="width:250px;">
                  <a-radio value="location">{{i18n('form.coordinate','坐标')}}</a-radio>
                  <a-radio value="address">{{i18n('form.addr','地址')}}</a-radio>
                  <a-radio value="locAdd">{{i18n('form.coordinate','坐标')}}+{{i18n('form.addr','地址')}}</a-radio>
              </a-radio-group>

          </a-form-model-item>

      </a-form-model>
    </div>
  </rx-layout>
</template>

<script>

  import {BaseFormModel} from "@lowcode/jpaas-common-lib";
  export default {
    name: "renderConfig_map",
    props: ["layerid", "destroy"],
    mixins: [BaseFormModel],
    data() {
      return {
          labelCol:{
              span:6
          },
          wrapperCol:{
              span:18
          },
        rules: {
          field: [{required: true, message: this.i18n('form.fieldKey','字段标识','input'), trigger: 'change'}],
          MAP: [{required: false, message: this.i18n('form.demonstrations','展示方式','select'), trigger: 'change'}],
        },
        fields: []
      }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formCellRender",key);
        },
      setData(data,fieldDts) {
        if(data){
          this.mdl=data;
        }
        this.fields=fieldDts;
      },
      validate(callback) {
        var self = this;
        this.$refs.form.validate(valid => {
          if (valid) {
            callback();
          } else {
            return;
          }
        });
      },
      getData() {
        return this.mdl;
      },
      handleChange(value,field){
        this.mdl[field] = value;
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
    }
  }
</script>

<style scoped>

</style>